<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Isee 8583 主页</title>
    <base href= "<?php echo base_url();?>">

    <!-- Bootstrap core CSS -->
    <link href="./style/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="./style/js/respond.min.js"></script>
    <script src="./style/js/html5shiv.min.js"></script>
    <![endif]-->
    <style type="text/css">
        body{
            padding-top: 50px;
        }
        .sidebar{
            display: none;
        }
        /*@media (min-width: 768px) {*/
        /*.sidebar {*/
        /*position: fixed;*/
        /*top: 51px;*/
        /*bottom: 0;*/
        /*left: 0;*/
        /*z-index: 1000;*/
        /*display: block;*/
        /*padding: 20px;*/
        /*overflow-x: hidden;*/
        /*overflow-y: auto; !* Scrollable contents if viewport is shorter than content. *!*/
        /*background-color: #f5f5f5;*/
        /*border-right: 1px solid #eee;*/
        /*}*/
        /*}*/
        @media (min-width: 768px){
            .sidebar{
                position: fixed;
                top: 51px;
                bottom: 0px;
                left: 0px;
                z-index: 1000;
                display: block;
                padding: 20px;
                overflow-x: hidden;
                overflow-y: auto;
                background-color: #f5f5f5;
                border-right: 1px solid #eee;
                /*border: 1px solid red;*/
            }
        }
        .nav-sidebar{
            margin-right: -21px;
            margin-bottom: 20px;
            margin-left: -20px;
        }
        .nav-sidebar > li > a{
            padding-right: 20px;
            padding-left: 20px;
        }
        .nav-sidebar > .active > a,
        .nav-sidebar > .active > a:hover,
        .nav-sidebar > .active > a:focus{
            color: #fff;
            background-color: #428bca;
        }







        .template-name-box,.template-name ,.template-table{
            padding: 5px 5px;
        }
        .template-name, .customer{
            padding: 10px 10px;
            text-align: center;
        }
        .my-account li{
            padding-top: 0px;
            padding-bottom: 0px;
            text-align: center;
        }
        .my-account li a{
            font-size: 20px;
        }
        input:focus, select:focus{
            background-color: #faf2cc;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">下拉菜单</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="./home.html">主页</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的 <span class="caret"></span></a>
                    <ul class="my-account dropdown-menu">
                        <li><?php echo $email;?></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="./account/password.html">修改密码</a></li>
                        <li><a href="./login/logout.html">注销</a></li>
                    </ul>
                </li>
                <li><a href="./help.html">帮助</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="./home.html">开始监控</a></li>
                <li class="active"><a href="./template/create.html">新建8583模板</a></li>
                <li><a href="./address/create.html">添加后台地址</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
            <h1 class="text-center">新建报文模板</h1>
            <form action="./template/create_result.html" method="post">
                <div class="row">
                    <div class="col-lg-4 col-lg-offset-4 template-name-box">
                        <input class="form-control customer" type="text" placeholder="标准银联" required autofocus name="customer">
                        <input class="form-control template-name" type="text" placeholder="CUP 收单" required name="name">
                    </div>
                    <div class="col-lg-8 col-lg-offset-2 template-table" style="overflow-x: hidden;padding-right: 22px">
                        <table class="table table-bordered table-hover table-striped table-header" >
                            <thead>
                            <tr>
                                <th class="big-title">域</th>
                                <th class="big-title" colspan="2">长度字段</th>
                                <th class="big-title" colspan="2">数据字段</th>
                            </tr>
                            <tr>
                                <th class="th1">#</th>
                                <th class="th2">类型</th>
                                <th class="th3">编码</th>
                                <th class="th4">最大长度</th>
                                <th class="th5">编码</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="template-list col-lg-8 col-lg-offset-2 template-table" style="height: 500px; overflow-y: auto;">
                        <table class="table table-bordered table-hover table-striped" >
                            <tbody style="height: 100px">
                            <?php foreach($cup_template as $row): ?>
                                <tr id="<?php echo $row['field'];?>">
                                    <td class="td1">
                                        <select class="field_select form-control" name="field_num[]">
                                            <option value="<?php echo $row['field'];?>" <?php echo my_set_select($row['use']);?> ><?php echo $row['field'];?></option>
                                            <option value="nil" <?php echo my_set_select(!$row['use']); ?>>不存在</option>
                                        </select>
                                    </td>
                                    <td class="td2">
                                        <select class="form-control len_section_select" name="len_section_type[]">
                                            <?php if($row['use'] == false):?>
                                            <?php    $row['len_section_type'] = ''; ?>
                                            <?php endif ?>
                                            <option value="llvar" <?php echo my_set_select_by_value('llvar', $row['len_section_type']); ?>>LLVAR</option>
                                            <option value="lllvar" <?php echo my_set_select_by_value('lllvar', $row['len_section_type']); ?>>LLLVAR</option>
                                            <option value="fix" <?php echo my_set_select_by_value('fix', $row['len_section_type']); ?>>FIX</option>
                                        </select>
                                    </td>
                                    <td class="td3">
                                        <select class="form-control len_section_encode_select" name="len_section_encode[]">
                                            <?php if($row['len_section_type'] == 'fix' || $row['use'] == false):?>
                                            <?php    $row['len_section_encode'] = ''; ?>
                                            <?php endif ?>
                                            <option value="bcd_left" <?php echo my_set_select_by_value('bcd_left', $row['len_section_encode']); ?>>BCD-LEFT</option>
                                            <option value="bcd_right" <?php echo my_set_select_by_value('bcd_right', $row['len_section_encode']); ?>>BCD-RIGHT</option>
                                            <option value="ascii" <?php echo my_set_select_by_value('ascii', $row['len_section_encode']); ?>>ASCII</option>
                                            <option value="hex" <?php echo my_set_select_by_value('hex', $row['len_section_encode']); ?>>HEX</option>
                                        </select>
                                    </td>
                                    <td class="td4">
                                        <div class="form-group">
                                            <?php if($row['use'] == false):?>
                                            <?php    $row['data_section_len'] = ''; ?>
                                            <?php endif ?>
                                            <input type="text" class="form-control data_section_len" name="data_section_len[]" id="data_section_len" value="<?php echo $row['data_section_len']; ?>">
                                        </div>
                                    </td>
                                    <td class="td5">
                                        <select class="form-control" name="data_section_encode[]">
                                            <?php if($row['use'] == false):?>
                                            <?php    $row['data_section_encode'] = ''; ?>
                                            <?php endif ?>

                                            <option value="bcd_left" <?php echo my_set_select_by_value('bcd_left', $row['data_section_encode']); ?>>BCD-LEFT</option>
                                            <option value="bcd_right" <?php echo my_set_select_by_value('bcd_right', $row['data_section_encode']); ?>>BCD-RIGHT</option>
                                            <option value="ascii" <?php echo my_set_select_by_value('ascii', $row['data_section_encode']); ?>>ASCII</option>
                                            <option value="bin" <?php echo my_set_select_by_value('bin', $row['data_section_encode']); ?>>BIN</option>
                                        </select>
                                    </td>

                                </tr>


                            <?php endforeach ?>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-lg-4 col-lg-offset-4" style="text-align: center">
                        <p class="text-danger">
                            <?php

                        if(isset($errmsg)){
                            echo $errmsg;
                        }
                        ?>
                        </p>
                        <button  type="submit" class="btn btn-lg btn-success" id="create_btn" style="margin-top: 20px">创建</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

</body>
<!-- Bootstrap core JavaScript
   ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./style/js/jquery-1.12.3.js"></script>
<script src="./style/js/bootstrap.min.js"></script>
<script src="./style/js/modal.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script type="text/javascript">
    window.onload = function () {

        $('.td1').width($('.th1').width());
        $('.td2').width($('.th2').width());
        $('.td3').width($('.th3').width());
        $('.td4').width($('.th4').width());
        $('.td5').width($('.th5').width());
        
        
        $('.template-list tbody tr').each(function () {
            var select = $(this).find('.td1 select').find('option[selected="selected"]');

            if ($(select).attr('value') != 'nil'){
                $(this).css('background-color', ' #8cd9b3');
            }else{
                $(this).css('background-color', ' #ccc');
            }
            select = $(this).find('.td2 select').find('option[selected="selected"]');
            if ($(select).attr('value') == 'fix'){
                $(this).find('.td3 select').attr('disabled', 'disabled');
            }


            $(this).find('.td1 select').change(function () {
                if($(this).val() != 'nil'){
                    $(this).parent().parent().css('background-color', '#8cd9b3');
                }else{
                    $(this).parent().parent().css('background-color', '#ccc');
                }
            });
        });



        var templateUtil = {
            valid_data_section_len:function (id) {
                var len = id.val();
                return this.isnum(len);
            },
            isnum:function (num) {
                var pattern = /^[1-9].*$/
                return pattern.test(num);
            }

        };

        $('.data_section_len').bind('input propertychange', function () {
            if (!templateUtil.valid_data_section_len($(this))){
                $(this).parent().addClass('has-error');
            }else{
                $(this).parent().removeClass('has-error');
            }
        });

        $('.len_section_select').change(function () {
            var len_section_encode_select = $(this).parent().parent().find('.len_section_encode_select');
            var type = $(this).val();
            if (type == 'fix'){
                len_section_encode_select.attr('disabled', 'disabled');
            }else{
                len_section_encode_select.removeAttr('disabled');
            }

        });
        



        $('#create_btn').click(function () {
            $('.len_section_encode_select').removeAttr('disabled');
        });






    }










</script>
</html>